<template>
  <v-card>
    <v-card-title>
      <div>
      <!-- <div v-show="roleName !== '3'"> -->
        <member-addition-button />
        <member-deletion-button />
      </div>
      <member-distribution-button />
    </v-card-title>
    <member-list />
  </v-card>
</template>

<script>
import { mapState } from 'vuex'
import MemberList from '@/components/containers/members/MemberList'
import MemberAdditionButton from '@/components/containers/members/MemberAdditionButton'
import MemberDeletionButton from '@/components/containers/members/MemberDeletionButton'
import MemberDistributionButton from '@/components/containers/members/MemberDistributionButton'
export default {
  layout: 'project',

  components: {
    MemberList,
    MemberAdditionButton,
    MemberDeletionButton,
    MemberDistributionButton
    // DiaLog
  },
  data() {
    return {
      roleName: null
    }
  },
  computed: {
    ...mapState('user', ['userId'])
  },
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  created() {
    console.log(this.userId)
    this.roleName = localStorage.getItem('userId')
    console.log(this.roleName)
  }
}
</script>
<style scoped>
.item {
  position: absolute;
  right: 5%;
}
</style>
